<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #app {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .line1 {
    font-family: monospace, "Zahra Serif Font";
    font-size: 200%;
    border-right: 2px solid #000;
    white-space: nowrap;
    overflow: hidden;
    animation: borders 0.7s infinite normal, widths 5s steps(15);


  }

  .line2 {
    font-family: monospace, "Zahra Serif Font";
    font-size: 200%;
    border-right: 2px solid #000;
    white-space: nowrap;
    overflow: hidden;
    animation: borders 0.7s infinite normal, widths 10s steps(38);


  }

  /* 定义闪烁动画 */
  @keyframes borders {
    from {
      border-right-color: #000;
    }

    to {
      border-right-color: #fff;
    }
  }

  /* 容器宽度改变动画 */
  @keyframes widths {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }
</style>

<body>
  <div id="app">
    <p class="line1">Hello GoodNoon!</p>
    <p class="line2">而世之奇伟、瑰怪，非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也。</p>
  </div>
</body>

</html>